<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <div style="margin-top: 15px;margin-bottom: 20px;width: 80%" >
                <el-input placeholder="请输入内容" v-model="searchText" class="input-with-select">
                    <el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
                        <el-option label="手机号" value="0"></el-option>
                        <el-option label="订单号" value="1"></el-option>
                    </el-select>

                    <el-button slot="append" type="primary" class="el-icon-search" @click="searchBySelect">搜索</el-button>
                </el-input>
            </div>
            <div>
                <el-radio-group v-model="radio1">
                    <el-radio-button label="0">待付款</el-radio-button>
                    <el-radio-button label="1">未安装</el-radio-button>
                    <el-radio-button label="2">待评论</el-radio-button>
                    <el-radio-button label="3">以评论</el-radio-button>
                </el-radio-group>
            </div>

            <el-table v-if=""
                :data="tableData"
                highlight-current-row
                style="width: 100%">


                <el-table-column
                    label="订单号"
                    width="220">
                    <template slot-scope="scope">

                        <i class="el-icon-shopping-cart-2"></i>
                        <span style="margin-left: 10px">{{ scope.row.orderId}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="手机号"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-mobile"></i>
                        <span style="margin-left: 10px">{{ scope.row.userPhone}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="下单时间"
                    width="210">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.orderTime|dateFmt('YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="类别"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-s-data"></i>
                        <span style="margin-left: 10px">{{ scope.row.category|productFmt}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="名称"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-s-data"></i>
                        <span style="margin-left: 10px">{{scope.row.orderPyName}} </span>
                    </template>
                </el-table-column>




                <el-table-column
                    label="购买详情"
                    width="180">
                    <template slot-scope="scope">

                        <el-popover trigger="hover" placement="top">
                            <div v-if="scope.row.category==1">设备介绍:
                                <span>{{JSON.parse(scope.row.orderJson).equipIntroduce}}  </span>
                            </div>
                            <span v-if="scope.row.category==0">产品名称:{{scope.row.orderPyName}}  </span><br>
                            <span v-if="scope.row.category==0">套餐名称:{{ JSON.parse(scope.row.orderJson).comboName}}  </span><br>
                            <div v-if="scope.row.category==0">套餐技术:
                                <span v-for=" item in JSON.parse(scope.row.orderJson).comboTechnicals">{{item.technicalName}}  </span>
                            </div>
                            <div v-if="scope.row.category==0">设备集合:
                                <span  v-for=" item in JSON.parse(scope.row.orderJson).equipmentLists">{{item.equipName}}*{{item.count}}  </span>
                            </div>

                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">详情</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    label="购买数量"
                    width="180">
                    <template slot-scope="scope">
                        <li class="el-icon-number"></li>
                        <span style="margin-left: 10px">{{scope.row.orderNum}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="价格"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-money"></i>
                        <span style="margin-left: 10px">{{ scope.row.orderPay}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="地址详情"
                    width="180">
                    <template slot-scope="scope">

                        <el-popover trigger="hover" placement="top">
                            <div>
                                <span>地址：{{JSON.parse(scope.row.orderAddress).province}}{{JSON.parse(scope.row.orderAddress).city}}</span>
                                <span>{{JSON.parse(scope.row.orderAddress).area}}{{JSON.parse(scope.row.orderAddress).detailAddress}}</span>
                                <br><span>姓名：{{JSON.parse(scope.row.orderAddress).addressName}}</span>
                                <br><span>电话：{{JSON.parse(scope.row.orderAddress).addressPhone}}</span>

                            </div>

                            <div slot="reference" class="name-wrapper">

                               <el-button type="warning" size="mini" @click="showForm(scope.row)">修改地址</el-button>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>


                <el-table-column label="订单状态" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="danger" v-if="scope.row.status==0" size="mini"
                                   @click="handleEdit(scope.$index, scope.row)">{{scope.row.status|statusFmt}}</el-button>
                        <el-button type="warning" v-if="scope.row.status==1" size="mini"
                                   @click="handleEdit(scope.$index, scope.row)">{{scope.row.status|statusFmt}}</el-button>
                        <el-button type="primary" v-if="scope.row.status==2" size="mini"
                                   @click="handleEdit(scope.$index, scope.row)">{{scope.row.status|statusFmt}}</el-button>
                        <el-button type="success" v-if="scope.row.status==3" size="mini"
                                   @click="handleEdit(scope.$index, scope.row)">{{scope.row.status|statusFmt}}</el-button>

                    </template>
                </el-table-column>


            </el-table>


            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes,prev, pager, next"
                    :total="tableLen"
                    prev-text="上一页"
                    next-text="下一页">
                </el-pagination>
            </div>

        </div>
        <el-dialog title="修改用户地址" v-model="dialogFormVisible">
            <el-form :model="addressTable">
                <el-form-item label="地区" label-width="100px">
                    <v-distpicker :province="addressTable.province" :city="addressTable.city" :area="addressTable.area" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
                </el-form-item>
                <el-form-item label="详细地址" label-width="100px">
                    <el-input
                        type="textarea"
                        :rows="1"
                        placeholder="请输入内容"
                        v-model="addressTable.detailAddress" class="address_home">
                    </el-input>
                </el-form-item>
                <el-form-item label="收货姓名" label-width="100px">
                    <el-input v-model="addressTable.addressName" placeholder="请输入内容" class="address_home"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" label-width="100px">
                    <el-input v-model="addressTable.addressPhone" placeholder="请输入内容" class="address_home"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="modifyAddress()">确 定</el-button>
  </span>
        </el-dialog>


    </div>

</template>

<script>
    var that;
    import headTop from '../components/headTop'
    export default {
        data() {
            return {
                initOrderId: 0,
                dialogFormVisible:false,
                addressTable:{},

                radio1: "",
                searchText:null,
                searchSelect:null,
                ifSearch: false,
                textarea1: "",
                StatusVo: {
                    status: -1,
                    context: "",
                    radio: -1,
                },
                evaluation:{
                    evaluationUserId: "",
                    evaluationOrderId: 1,
                    evaluationProductId: "",
                    evaluationCategory: 0,
                    evaluationLevel: 5,
                    evaluationCommentary: ""
                },

                formLabelWidth: '120px',

                rateValue: 5,
                textarea: "",
                expendRow: [],
                currentPage: 1,
                tableData: [],
                pageSize: 5,
                tableLen: 0,
                evaluationVisible:false,
                value: 0,
                selectTable: {},
                itemlis: [


                ],
            }
        },
        computed: {
            //计算并获取总价
            totalPrice() {
                let total = 0
                for (let i = 0; i < this.itemlis.length; i++) {
                    let item = this.itemlis[i]
                    total += item.price * item.count
                }
                return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
            }
        },
        activated() {
            this.getGoodList();
        },
        watch: {

            radio1:{
                handler(newName,oldName){
                    that.currentPage = 1;
                    that.pageSize = 5;
                    that.ifSearch = true;
                    that.StatusVo.radio = that.radio1;
                    that.searchBySelect();

                },
            },
            searchText:{
                handler(newName,oldName){
                   if(newName==null||newName=="")
                   {
                       that.ifSearch = false;
                       that.currentPage = 1;

                       that.pageSize = 5;
                       that.getGoodList();
                       return;

                   }
                },
            },
        },
        beforeCreate() {
            that = this;
        },
        components: {
            headTop,
        },

        filters:{
            idToName: function(value){
                that.$axios.get(this.$host2+"/zk/all-products/"+value,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        that.value = res.data.data.productName;
                        return that.value;

                    }
                ).catch(error=>console.log(error));
                return that.value;
            },
            productFmt(value){
                if(value==0)
                {
                    value = "产品"
                }
                else if(value ==1){

                    value="设备"
                }
                return value;
            },
            statusFmt(value){
                if(value==0){
                    value = "未付款"
                }
                else if(value == 1)
                {
                    value = "未安装"
                }
                else if(value ==2)
                {
                    value = "待评价"
                }
                else if(value==3)
                {
                    value = "已评论"
                }
                return value
            }

        },
        methods: {
            modifyAddress(){
                var that = this


                this.$axios.put(this.$host2+`/zk/orderPy/`,{
                    orderId: that.initOrderId,
                    orderAddress: JSON.stringify(that.addressTable)

                },{
                    headers:{
                        "Authorization": localStorage.getItem('token')
                    },

                }).then(res=>{
                    if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '更新成功'
                        });
                        this.searchBySelect()
                        this.dialogFormVisible = false
                    }else{
                        this.$message({
                            type: 'error',
                            message: "更新失败"
                        });
                    }
                }).catch(error=>{
                    console.log(error)
                    this.$message({
                        type: 'error',
                        message: "更新失败，服务器错误"
                    });
                });
        },
            showForm(row){
                this.dialogFormVisible = true
                this.addressTable = {}
                this.initOrderId = row.orderId
                this.addressTable.province = JSON.parse(row.orderAddress).province
                this.addressTable.city = JSON.parse(row.orderAddress).city
                this.addressTable.area = JSON.parse(row.orderAddress).area
                this.addressTable.detailAddress = JSON.parse(row.orderAddress).detailAddress
                this.addressTable.addressName = JSON.parse(row.orderAddress).addressName
                this.addressTable.addressPhone = JSON.parse(row.orderAddress).addressPhone

            },
            onChangeProvince(a){
                if(a!==null||a!=="")
                    this.addressTable.province = a.value
            },
            onChangeCity(a){
                if(a!==null||a!=="")
                    this.addressTable.city = a.value
            },
            onChangeArea(a){
                if(a!==null||a!=="")
                    this.addressTable.area = a.value
            },
            searchBySelect(){
                if(this.searchSelect!=null||this.searchText!=null) {
                    this.StatusVo.status = this.searchSelect;
                    this.StatusVo.context = this.searchText;
                }
                if(this.radio1!=null||this.radio1!="")

                {

                }
                else if(this.searchSelect==null||this.searchSelect==""||this.pageSize==null||this.pageSize=="")
                {
                    this.$message.error("请填写目标信息后再查找");

                }
                var that = this
                this.$axios.post(this.$host2+"/zk/orderPy/searchBySelect?current="+that.currentPage+"&size="+that.pageSize,this.StatusVo,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        if (res.data.data.ipage.records.length>0) {
                            that.tableData = res.data.data.ipage.records;
                            that.tableLen = res.data.data.total;
                            this.tableData.sort(this.compare('status'))
                            console.log(that.tableData + "===" + typeof that.tableData)
                            that.ifSearch = true;
                            that.$message.success("查询成功")
                        }
                        else{
                            that.tableData = [];
                            that.$message.error("查询失败")

                        }

                    }
                ).catch(error=>console.log(error));




            },
            handleSizeChange: function(size) {
                this.pageSize = size;
                if(this.ifSearch==false) {
                    this.getGoodList();
                }
                else{
                    this.searchBySelect();
                }
                /*console.log(this.pagesize) */
            },
            //点击第几页
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
                if(this.ifSearch==false) {
                    this.getGoodList();
                }
                else{
                    this.searchBySelect();
                }
                /*console.log(this.currentPage) */
            },
            compare(property) {
                return function (a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            install(row){
                row.status = 2;
                that.$axios.put(this.$host2+"/zk/orderPy/",row,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        if(res.data.code==200) {
                            this.getGoodList();

                        }

                    }
                ).catch(error=>console.log(error));



            },
            handleEdit: function(index,row){
                if(row.status==0){
                    //跳到支付宝接口页面
                    row.status+=1;
                }
                else if(row.status == 1)
                {

                    //更新状态
                    this.install(row);
                    this.$message.success("已经安装好")
                    return

                }
                else if(row.status == 2)
                {
                    //跳到评价页面
                    this.selectTable = row;

                }
                else if(row.status == 3){
                    this.$message.success("感谢用户支持,您的关怀对我们的最大支持")
                    return;

                }












            },

            //获取商品列表
            getGoodList: function (){

                var that = this
                this.$axios.get(this.$host2+"/zk/orderPy/?current="+that.currentPage+"&size="+that.pageSize,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        that.tableData = res.data.data.ipage.records;
                        that.tableLen = res.data.data.total;
                        this.tableData.sort(this.compare('status'))
                        console.log(that.tableData+"==="+typeof that.tableData)

                    }
                ).catch(error=>console.log(error));
            },
            //从购物车中移除该商品
            handleRemove(index) {
                this.itemlis.splice(index, 1)
            }
        },
        mounted() {
            //获取商品
            this.getGoodList()
        }
    }
</script>

<style lang="less">
    @import '../style/mixin';
    .table_container{
        padding: 20px;
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }

</style>
